<template>

  <div class="custom-table">
    <el-table :border="true"
              v-loading="loading"
              @selection-change="handleSelectionChange"
              class="custom-table-border"
              row-key="keyId"
              :cell-class-name="cellFuncton"
              default-expand-all
              :data="myTableData"
              style="width: 100%">
      <el-table-column v-if="selection"
                       type="selection"
                       width="55"
                       align="center" />
      <el-table-column align="center"
                       class="custom-table-index"
                       type="index">
      </el-table-column>
      <el-table-column v-for="(tableItem,tableIndex) in myColumns"
                       :align="tableItem.align"
                       :show-overflow-tooltip="true"
                       :header-align="tableItem.headerAlign"
                       :key="tableItem+tableIndex"
                       :label="tableItem.label"
                       :min-width="tableItem.width?'':'120px'"
                       :width="tableItem.width">

        <template slot-scope="scope">

          <!--    不用插槽的-->
          <!--          @click="copyUrl(scope.row[tableItem.key])"-->
          <div class="ellipsis cur-p font-table"
               v-if="!tableItem.slot">
            {{ scope.row[tableItem.key] }}
          </div>

          <!--    要使用插槽的-->
          <div v-if="tableItem.slot">
            <slot :name="tableItem.key"
                  :data="scope.row"></slot>
          </div>

        </template>

      </el-table-column>

    </el-table>

    <Pagination :page="pagination.pageNum"
                :limit="pagination.pageSize"
                @pagination="paginationChange"
                :total="total">
    </Pagination>

  </div>

</template>

<script>

// 参数：
//   columns:[{
//        key: '对应的值',
//        label: '标签名',
//        slot: true//是否使用自定义方式
//   }]
//   tableData:[
//        {
//          date: '2016-05-02',
//          name: '小虎',
//          address: '上海市普陀区金沙江路 1518 弄'
//        }
//   ]

import Pagination from "./Pagination";

export default {
  components: { Pagination },
  props: {
    pagination: {
      type: Object,
      default: function () {
        return {
          pageNum: 1,
          pageSize: 10
        }
      }
    },
    columns: {
      type: Array,
      default: function () {
        return [
          {
            key: '活动名称',
            label: '活动名称'
          },
          {
            key: '活动时间',
            label: '活动时间'
          },
          {
            key: '活动地点',
            label: '活动地点'
          },
          {
            key: '活动类型',
            label: '活动类型'
          },
          {
            key: '活动规模',
            label: '活动规模'
          },
          {
            key: '审批状态',
            label: '审批状态'
          },
          {
            key: 'options',
            label: '操作',
            slot: true
          }
        ]
      }
    },
    tableData: {
      type: Array,
      default: function () {
        return [
          {
            '活动名称': '2021群星观展',
            '活动时间': '2021-06-12 18：00！22：00',
            '活动地点': '合川县人民广场',
            '活动类型': '文艺演出',
            '活动规模': '500人',
            '审批状态': '审批通过',
          },
          {
            '活动名称': '农机展销会',
            '活动时间': '2021-06-12 18：00！22：00',
            '活动地点': '合川县人民广场',
            '活动类型': '展销会',
            '活动规模': '1000人',
            '审批状态': '待审批',
          },
          {
            '活动名称': '2020群星观展',
            '活动时间': '2021-06-12 18：00！22：00',
            '活动地点': '合川县人民广场',
            '活动类型': '文艺演出',
            '活动规模': '500人',
            '审批状态': '审批通过',
          },
        ]
      }
    },
    total: {
      type: Number,
      default: 0
    },
    loading: {
      type: Boolean,
      default: false
    },
    selection: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      myColumns: [],
      myTableData: [],
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
    }
  },
  watch: {
    columns: {
      handler: function (val) {
        val.map((res) => {
          if (!res.align) {
            res.align = 'center'
          }

          if (!res.headerAlign) {
            res.headerAlign = 'center'
          }

          return res
        })
        this.myColumns = val
      },
      deep: true,
      immediate: true
    },
    tableData: {
      handler: function (val) {
        this.myTableData = val
      },
      deep: true,
      immediate: true
    }
  },
  methods: {
    // 多选框选中数据
    handleSelectionChange (selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length != 1
      this.multiple = !selection.length
      this.$emit('multipleChange', this.multiple)
      this.$emit('handleSelectionChange', {
        ids: this.ids,
        single: this.single,
        multiple: this.multiple
      })
    },
    handleEdit () {
      alert(8888)
      // console.log(index, row)
    },
    handleDelete (index, row) {
      // console.log(index, row)
    },
    paginationChange (e) {
      this.$emit('pagination', e)
    },
    cellFuncton ({ row, column, rowIndex, columnIndex }) {
      // console.log(document.querySelector(`[name=${column.id}]`))
    },
    copyUrl (data) {
      let url = data;
      let oInput = document.createElement('input');
      oInput.value = url;
      document.body.appendChild(oInput);
      oInput.select(); // 选择对象;
      // console.log(oInput.value)
      document.execCommand("Copy"); // 执行浏览器复制命令
      this.$message({
        message: '已成功复制到剪切板',
        type: 'success'
      });
      oInput.remove()
    }
  }
}
</script>

<style lang="scss">
.custom-table {
  //background-color: #fff;

  .el-table__header {
    th {
      background: linear-gradient(180deg, #fdfdfd 0%, #ededed 100%);
      border: 1px solid #c2c4ce;
      border-left: none !important;
    }

    th:first-child {
      background-image: none !important;
      background-color: #eaecf8;
    }
  }

  .custom-table-index {
    width: 35px;
    height: 34px;
  }

  td:first-child {
    background: #eaecf8 !important;
    font-size: 14px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #232323;
    line-height: 14px;
  }
}

.custom-table-border {
  border-top: none;
}

/*.el-table--enable-row-hover .el-table__body tr:hover>td{*/
/*  !*background-color: #212e3e !important;*!*/
/*  transform: scale(1.1)!important;*/
/*}*/
</style>
